<template>
 <div class="exam_box knife_container">
    <div class="logo_img_box">
      <span class="logo_img">
        <img src="../../images/knife_logo.png" alt="">
      </span>
      <h2 class="memberTit">--欢迎您注册为刀具联盟会员--</h2>
    </div>
    <div class="exam-content">
      <template v-if="$route.params.type === 'failure'">
        <span class="result_icon"><img src="../../images/failure.png" /></span>
        <p class="result">审核失败</p>
        <p class="reason">您好，由于您的 <span class="detail-reason">企业营业执照过于模糊</span>无法进行认证，因此无法审核通过</p>
        <p class="solution">请您谅解，若有疑问请致电<span class="color-blue">0576-86999962</span></p>
      </template>
      <template v-else>
        <span class="result_icon"><img src="../../images/succeed.png" /></span>
        <p class="result">{{routeFrom === 'CompanyCert' ? '注册成功' : '上传成功'}}</p>
        <p class="reason" v-if="routeFrom === 'CompanyCert'">您的账号将由专属客服<em class="color-gray6B">进行身份审核</em></p>
         <p class="reason" v-else>可前往个人中心的个人资料查看审核进度</p>
        <p class="solution">我们将在<em class="color-gray6B">48</em>小时内 对您账号进行审核，若有疑问请致电<span class="color-blue">0576-86999962</span></p>
      </template>
    </div>
    <div class="exam-btns-box">
      <template v-if="$route.params.type === 'failure'">
        <router-link class="exam-btn color-gray6B bg-gray" :to="{name: 'Index'}">返回首页</router-link>
        <router-link class="exam-btn bg-yellow color-gray30" :to="{name: 'CompanyCert'}">重新提交审核材料</router-link>
      </template>
      <router-link :to="{name: 'Index'}" class="exam-btn bg-yellow color-gray30" v-else>前往首页</router-link>
    </div>
  </div> 
</template>

<script>
export default {
  data () {
    return {
      routeFrom: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.routeFrom = from.name
    })
  },
  watch: {
    '$route' (to, from) {
      console.log(to, from)
      if (from.name === 'Register') {
        this.isRegister = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .exam_box{
    margin-top: 40px;
    margin-bottom: 40px;
    background: #fff;
  }
  .logo_img_box{
    padding-top: 100px;
    text-align: center;
    .logo_img{
      display: inline-block;
      width: 180px;
      & > img{
        width: 100%;
      }
    }
  }
  .memberTit{
    font-size: 18px;
    color: #FFCC00;
    padding-bottom: 80px;
    padding-top: 20px;
  }
  .exam-content{
    text-align: center;
    .result_icon{
      display: inline-block;
      width: 80px;
      margin-bottom: 20px;
      img{
        width: 100%;
      }
    }
    .result{
      font-size: 20px;
      color: #303030;
      margin-bottom: 10px;
    }
    .reason{
      color: #6B6B6B;
      line-height: 2.5;
      .detail-reason{
        color: #000;
      }
    }
    .solution{
      color: #BBBBBB;
      line-height: 1.5;
      span{
        padding-left: 10px;
      }
    }
  }
  .exam-btns-box{
    margin-top: 35px;
    padding-bottom: 80px;
    text-align: center;
    .exam-btn{
      display: inline-block;
      border-radius: 67px;
      font-size: 16px;
      width: 276px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-right: 20px;
      &:last-child{
        margin-right: 0;
      }
    }
    .btn-gray{
      background: #EEEEEE;
    }
    .btn-yellow{
      background: #FFE100;
    }
  }
  .newUser-box{
    width: 1000px;
    margin: 80px auto 0;
    border-top:2px solid #F4F4F4;
    padding-top: 85px;
    text-align: center;
    img{
      width: 272px;
    }
    .invite-word{
      font-family:PingFangSC-Medium, Microsoft YaHei;
      color: #303030;
      line-height:22px;
    }
  }
</style>
